<template>
  <el-dialog
    :title="dataForm.id ? '编辑' : '新增'"
    :visible.sync="dialogFormVisible"
    :append-to-body="true"
  >
    <el-form
      ref="dataForm"
      :model="dataForm"
      :rules="dataRules"
      label-position="right"
      label-width="80px"
    >
      <el-form-item label="姓名" prop="name">
        <el-input
          v-model="dataForm.name"
          autocomplete="off"
          placeholder="请输入姓名"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input-number
          v-model="dataForm.age"
          placeholder="请输入年龄(岁)"
          onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
          :min="0"
          :max="120"
        >
        </el-input-number>
      </el-form-item>
      <el-form-item label="性别" prop="sex" required>
        <el-select v-model="dataForm.sex" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="家乡" prop="hometown">
        <el-input
          v-model="dataForm.hometown"
          autocomplete="off"
          placeholder="请输入家乡"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="爱好" prop="hobby">
        <el-input
          v-model="dataForm.hobby"
          autocomplete="off"
          placeholder="请输入爱好"
          clearable
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" @click="dataForm.id ? update() : add()"
        >确定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import { getBroInfo, addBro, updateBro, checkRepeat } from "@/api/bro";

export default {
  data() {
    // 定义校验器，这里校验的是名字不能重复
    const validateBroName = (rule, value, callback) => {
      checkRepeat({
        id: this.dataForm.id,
        name: "name",
        value: this.dataForm.name,
      })
        .then((data) => {
          if (data) {
            callback(new Error("待办事项：" + this.dataForm.name + " 已建立"));
          } else {
            callback();
          }
        })
        .catch((err) => {
          callback(err);
        });
    };

    return {
      //性别选项框
      options: [
        {
          value: 1,
          label: "男",
        },
        {
          value: 0,
          label: "女",
        },
      ],
      // 控制当前的弹框的显示与隐藏
      dialogFormVisible: false,
      // 表单数据，定义和初始化
      dataForm: {
        id: undefined,
        sex: undefined,
        name: "",
        age: 0,
        hometown: "",
        hobby: "",
      },
      // 表单校验规则，一定要保证 下面的key和prop的值上保持一致
      dataRules: {
        name: [
          { required: true, message: "待办事项不能为空", trigger: "blur" },
          // { validator: validateBroName, trigger: "blur" },
          { max: 10, message: "长度不能超过10个字符", trigger: "blur" },
        ],
        remark: [{ max: 200, message: "备注长度不能超过200", trigger: "blur" }],
      },
    };
  },
  methods: {
    init(id) {
      this.dialogFormVisible = true;
      this.dataForm.id = id || undefined;
      if (id) {
        getBroInfo(id).then((data) => {
          this.dataForm.name = data.name;
          this.dataForm.sex = data.sex;
          this.dataForm.age = data.age;
          this.dataForm.hometown = data.hometown;
          this.dataForm.hobby = data.hobby;
        });
      }
    },
    // 新增待办
    add() {
      // 表单校验
      this.$refs["dataForm"].validate((valid) => {
        if (!valid) {
          this.$message.error("校验不通过");
          return;
        }
        addBro(this.dataForm)
          .then((data) => {
            this.dialogFormVisible = false;
            this.$message.success("新增成功");
            this.$emit("refreshDataList");
          })
          .catch((e) => {
            this.$message.error(e.msg);
          });
      });
    },
    // 更新的待办
    update() {
      // 表单校验
      this.$refs["dataForm"].validate((valid) => {
        if (!valid) {
          this.$message.error("校验不通过");
          return;
        }
        updateBro(this.dataForm)
          .then((data) => {
            this.dialogFormVisible = false;
            this.$message.success("更新成功");
            this.$emit("refreshDataList");
          })
          .catch((e) => {
            this.$message.error(e.msg);
          });
      });
    },
  },
};
</script>
